<template>
  <div class="dashboard-container" >

       <headFunction :Function='Function'  @search='search' @add='add'></headFunction>

       <el-alert type="info" style="font-size: 32px;margin-top: 20px;">
        <i style="font-size: 16px;" class="el-icon-info"></i> 共 {{page.counts }} 条数据
      </el-alert>

      <el-table
      :data="tableData"
      style="width: 100%;"
      :header-cell-style="{background: '#fafafa'}"
      >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
        <el-table-column
          prop="title"
          label="用户名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="日期"
          align="center"
                sortable>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
              <template slot-scope={row} >
                <el-button type="primary" plain icon="el-icon-edit" circle @click="edit(row.id)"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" circle @click="del(row.id)"></el-button>
              </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
   <page-tool :page='page' @handleCurrentChange='handleCurrentChange' @handleSizeChange='handleSizeChange'></page-tool>
    <!-- 弹出框 -->
    <permissions-add :FunctionName='FunctionName' :dialogFormVisible.sync='dialogFormVisible' ref="editS"></permissions-add>
  </div>
</template>

<script>
// 获取.删除
import { list, remove } from '@/api/base/permissions'
import pageTool from '../components/page-tool.vue'
import headFunction from '../components/headFunction.vue'
import * as dayjs from 'dayjs'
import permissionsAdd from '../components/permissions-add.vue'
export default {
  name: 'base-logs',
  components: {
    pageTool, headFunction, permissionsAdd
  },
  data () {
    return {
      Function: '新增权限组',
      FunctionName: '',
      dialogFormVisible: false,
      tableData: [],
      page: {
        page: 1,
        pagesize: 10,
        counts: null
      }
    }
  },
  created () {
    this.list()
  },
  methods: {
    // 获取
    async list () {
      const { data } = await list(this.page)
      this.page.counts = data.counts
      data.list.map((item) => {
        item.create_date = dayjs(item.create_date).format('YYYY-MM-DD')
      })
      this.tableData = data.list
      // console.log(data)
    },
    // 分页
    handleCurrentChange (currentPage) {
      this.page.page = currentPage
      this.list()
    },
    handleSizeChange (pagesize) {
      this.page.pagesize = pagesize
      this.list()
    },
    // 删除
    async del (id) {
      console.log(id)
      const deleteS = await remove({ id: id })
      console.log(deleteS)
      this.list()
    },
    // 编辑
    edit (id) {
      // console.log(id)
      this.FunctionName = '编辑权限组'
      this.dialogFormVisible = true
      this.$refs.editS.edit(id)
    },
    // 搜索
    async search (e) {
      const res = await list({ title: e })
      console.log(res)
      res.data.list.map((item) => {
        item.create_date = dayjs(item.create_date).format('YYYY-MM-DD')
      })
      this.page.counts = res.data.counts
      this.tableData = res.data.list
    },
    add () {
      // console.log('添加')
      this.FunctionName = '创建权限组'
      this.dialogFormVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container{
  margin: 20px;
  padding: 20px;
  background-color: #fff;}
</style>
